<template>
    <div class='select-tree' v-clickoutside="closeTreeFun">
        <el-input 
            class="superior_input" 
            v-model="label_m" 
            @focus="inputFocus" 
            readonly 
            :placeholder='placeholder'>
        </el-input>
        <div class="act-btn">
            <i class="fa fa-trash-o" v-show="label" @click="clearAll"></i>
            <i class="fa fa-times" @click="closeTreeFun" v-show="showTree"></i>
        </div>
        <transition
            
            name="el-zoom-in-top">
            <div class="superior_tree" v-if="showTree">
                <el-tree
                    :data="data" 
                    node-key="id"
                    :height="height"
                    @node-click="nodeClick"
                    :props="defaultProps" 
                    highlight-current>
                </el-tree>
            </div>
        </transition>
    </div>
</template>
<script>

export default {
    name: "selectTree", // 业务场景选择树 第一级参数配置 第二级是级联参数
    components: {},
    props: {
        data: {
            type: Array,
            default() {
                return []
            }
        },
        value: { // v-model 返回的是树节点的id
            type: [String, Number],
            default: ''
        },
        label: {
            type: String,
            default: ''
        },
        height: {
            type: Number, // 高度
            default: 240
        },
        defaultProps: {
            type: Object,
            default() {
                return {
                    children: 'children',
                    label: 'label',
                    value: 'value'
                }
            }
        },
        placeholder: {
            type: String,
            default: '请选择'
        }
    },
    data() {
        return {
            showTree: false,
        };
    },
    watch: {
        value(val) {
            
        }
    },
    mounted() {
        this.$nextTick(() => {
            
        })
    },
    computed: {
        label_m: {
            get: function() {
                return this.label
            },
            set: function(val) {
                this.$emit('update:label', val)
            }
        },
        value_m: {
            get: function() {
                return this.value
            },
            set: function(val) {
                this.$emit('input', val)
            }
        }
    },
    methods: {
        inputFocus() { // 输入框 聚焦时 显示上级树
            this.showTree = true;
        },
        clearAll() { // 清空按钮
            this.$emit('input', '');
            this.$emit("update:label", '');
        },
        nodeClick(treeNode) { // 树节点点击事件
            console.log(treeNode)
            this.label_m = treeNode[this.defaultProps.label];
            this.value_m = treeNode[this.defaultProps.value];
            if(!treeNode[this.defaultProps.children || 'children'] || Array.isArray(treeNode[this.defaultProps.children || 'children']) && treeNode[this.defaultProps.children || 'children'].length == 0) {
                this.closeTreeFun();
            }
        },
        closeTreeFun() {
            this.showTree = false;
        },
    }
};
</script>
<style lang="scss" scoped>
.select-tree {
    position: relative;
    .el-tree {
        z-index: 3;
        height: 240px;
        overflow: auto;
    }
    .act-btn {
        position: absolute;
        right: 8px;
        top: 3px;
        i.fa-trash-o {
            float: left;
            margin: 8px 5px;
            cursor: pointer;
        }
        i.fa-times {
            float: right;
            margin: 8px 5px;
            cursor: pointer;
        }
    }
    .superior_input /deep/ .el-input__inner{
        vertical-align: middle;
    }
    .superior_tree{
        position: absolute;
        width: 100%;
        min-width: 200px;
        z-index: 5;
        top: 42px;
        left: 0;
        border: 1px solid #E4E7ED;
        border-radius: 4px;
        background-color: #FFF;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        padding: 5px 5px 5px 10px;
        overflow: hidden;
    }
}
</style>
